<template>
	<view class="actions">
		<template v-if="!materialsBtn">
			<image :src="isDisabled ? '/static/images/common/round_minus.png' : '/static/images/common/jiajian.png'" class="minus-btn" v-if="number" @tap.stop="minus"></image>
			<view v-if="number" class="number">{{ number }}</view>
			<image :src="isDisabled ? '/static/images/common/round_add_disabled.png' : '/static/images/common/round_add_normal.png'" class="add-btn" @tap.stop="add"></image>
		</template>
		<template v-else>
			<view class="materials-box">
				<!-- <button type="primary" size="mini" class="materials-btn" @tap="$emit('materials')">选规格</button> -->
				<u-tag @click="$emit('materials')" text="选规格" bgColor="#EDAC2F" borderColor="#EDAC2F" shape="circle"></u-tag>
				<view class="number-badge" v-if="number">
					<view class="number">{{ number }}</view>
				</view>
			</view>
		</template>
	</view>
</template>

<script>
export default {
	name: 'Actions',
	props: {
		number: {
			type: Number,
			default: 0
		},
		materialsBtn: {
			type: Boolean,
			default: false
		},
		isDisabled: {
			type: Boolean,
			default: false
		}
	},
	methods: {
		add() {
			if (this.isDisabled) return;
			this.$emit('add');
		},
		minus() {
			this.$emit('minus');
		}
	}
};
</script>

<style lang="scss" scoped>
.actions {
	margin-right: 20rpx;
	display: flex;
	align-items: center;

	.add-btn,
	.minus-btn {
		width: 44rpx;
		height: 44rpx;
	}

	.number {
		width: 44rpx;
		height: 44rpx;
		margin: 0 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 32rpx;
	}

	.materials-box {
		position: relative;
		display: flex;

		.materials-btn {
			background-color: #edac2f;
			border-radius: 50rem !important;
		}

		.number-badge {
			z-index: 4;
			position: absolute;
			right: -16rpx;
			top: -14rpx;
			background-color: #fff;
			border-radius: 100%;
			width: 40rpx;
			height: 40rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			.number {
				font-size: 20rpx;
				flex-shrink: 0;
				background-color: #ec3e40;
				color: #fff;
				width: 30rpx;
				height: 30rpx;
				line-height: 30rpx;
				text-align: center;
				border-radius: 100%;
			}
		}
	}
}
</style>
